<template>
	<view>
        <view class="tabs-view">
            <u-tabs active-color="#ff5000" :list="tabsList" :is-scroll="false" :current="tabsCurrent" @change="changeTabs" bar-width="80"></u-tabs>
        </view>
        <view class="coupons-container">
            <mescroll-body ref="mescrollRef" top="80" :down="down" @down="downCallback" @up="upCallback">
                <view class="coupon-item" :class="coupon.used_status === 1 ? 'used' : (coupon.used_status === 2 ? 'overdue' : 'default')" v-for="(coupon, couponIndex) in couponsList" :key="couponIndex">
                    <view class="coupon-info u-flex" :class="tabsCurrent === 1 ? 'unavailable' : ''">
                        <view class="coupon-left u-flex-1 u-line-1">
                            <view class="coupon-title u-line-1">
                                {{ coupon.title }}
                            </view>
                            <custom-price :price="coupon.coupon_price" :textColor="'#FFFFFF'" :fontWeight="600" :size="60"></custom-price>
                            <view class="coupon-title">
                                   满{{ coupon.coupon_threshold_price }}元可用
                            </view>
							<view class="u-padding-top-10" v-if="coupon.use_scope">
								仅限
								<text v-if="coupon.use_scope === 'ALL'">全平台</text>
								<text v-if="coupon.use_scope === 'CATEGORY'">品类</text>
								<text v-if="coupon.use_scope === 'SOME_GOODS'">部分商品</text>
								使用
							</view>
							<!-- <view class="u-padding-top-10" v-else>仅限 <nuxt-link :to="'/shop/' + coupon.seller_id" style="color: #fff">{{ coupon.seller_name }}</nuxt-link> 店铺使用</view> -->
							<view class="u-padding-top-10 u-line-1" v-else>
								仅限 <u-link :href="'/pages/shop/shop?shop_id=' + coupon.seller_id" color="#FFFFFF">{{ coupon.seller_name }}</u-link> 店铺使用
							</view>
                        </view>
                        <view class="coupon-right u-text-center">
                            <view class="coupon-title">副券</view>
                            <view class="u-font-26">{{ coupon.start_time |date }}</view>
                            <view class="u-font-26">至</view>
                            <view class="u-font-26">{{ coupon.end_time | date }}</view>
                        </view>
                        <text class='i'></text>
                        <text class='is-used'></text>
                        <text class='is-overdue'></text>
                    </view>
                </view>
            </mescroll-body>
        </view>
        <u-tabbar v-model="tabbarCurrent" :list="tabbarList" active-color="#ff5000" :before-switch="beforeSwitch"></u-tabbar>
        <loading-view v-if="loading"></loading-view>
    </view>
</template>

<script>
    import * as API_Members from '@/api/members.js'
    import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js"
	export default {
        mixins: [MescrollMixin],
		data() {
			return {
				tabsList: [
                    { name: '待使用' },
                    { name: '已使用' },
                    { name: '已过期' }
                ],
                tabsCurrent: 0,
                tabbarList: [
                    {
                        iconPath: "youhuiquan",
                        selectedIconPath: "youhuiquan",
                        text: '领优惠券',
                        customIcon: true
                    }, {
                        iconPath: "wode",
                        selectedIconPath: "wode",
                        text: '我的优惠券',
                        customIcon: true
                    }
                ],
                tabbarCurrent: 1,
                params: {
                    page_no: 1,
                    page_size: 10,
                    status: 1
                },
                finished: false,
                couponsList: [], //优惠券列表
                down: {
                    auto: false //是否在初始化完毕之后自动执行一次下拉刷新的回调
                },
				tihsit: [],
                loading: true
			}
		},
		methods: {
            beforeSwitch(index) {
                if (index === this.tabbarCurrent) return
                uni.redirectTo({
                    url: "/promotion-module/coupons/coupons"
                })
            },
            changeTabs(index) {
				console.log(88, index)
                this.tabsCurrent = index
                this.couponsList = []
                this.params.page_no = 1
                this.params.status = index + 1
				// if (this.tabsCurrent == 0) {
				// 	API_Members.getCoupons(this.params).then(response => {
				// 	    const { data } = response
				// 	    this.couponsList.push(...data)
				// 	})
				// }
				this.getCoupons()
            },
            //下拉刷新
            downCallback() {
                this.changeTabs(this.tabsCurrent)
            },
            //上拉加载
            upCallback(page) {
                this.params.page_no = page.num
                this.getCoupons()
            },
            //获取优惠券列表
            getCoupons() {
                API_Members.getCoupons(this.params).then(response => {
                    const { data } = response
                    this.couponsList.push(...data)
                    this.loading = false
                    // setTimeout(()=>{
                    this.mescroll.endBySize(data.length, response.data_total)
                    // }, 500)
                })
            }
		}
	}
</script>

<style lang="scss" scoped>
    .coupons-container {
        /deep/.u-empty {
            margin-top: 100rpx !important;
        }
        .coupon-item {
            &.used {
                filter: grayscale(100%);
                .is-used {
                    display: block !important;
                }
            }
            &.overdue {
                filter: grayscale(100%);
                .is-overdue {
                    display: block !important;
                }
            }
            &.default {
                filter: grayscale(0%);
            }
            .coupon-info {
                position: relative;
                padding: 0 20rpx;
                margin: 20rpx;
                overflow: hidden;
                color: #FFFFFF;
                background: radial-gradient(transparent 0, transparent 10rpx, #ff5000 10rpx);
                background-size: 30rpx 30rpx;
                background-position: 18rpx 6rpx;
                &::before {
                    content: '';
                    position: absolute;
                    top: 0;
                    bottom: 0;
                    left: 20rpx;
                    right: 20rpx;
                    z-index: -1;
                    background-color: #ff5000;
                }
                &.unavailable {
                    background: radial-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 10rpx, #7a7a7a 10rpx);
                    background-size: 30rpx 30rpx;
                    background-position: 18rpx 6rpx;
                    &::before {
                        background-color: #7a7a7a;
                    }
                }
                .coupon-left {
                    padding: 24rpx 20rpx 24rpx 10rpx;
                    border-right: 4rpx dashed rgba(255, 255, 255, .3);
                }
                .coupon-right {
                    padding: 20rpx 30rpx;
                    .coupon-title {
                        font-size: 50rpx;
                    }
                }
                .i {
                    position: absolute;
                    left: 20%;
                    top: 90rpx;
                    height: 380rpx;
                    width: 780rpx;
                    background-color: rgba(255, 255, 255, .15);
                    transform: rotate(-30deg);
                }
                .is-used, .is-overdue {
                    display: none;
                    position: absolute;
                    z-index:20;
                    top: -30rpx !important;
                    left: auto !important;
                    right: -30rpx !important;
                    width: 160rpx;
                    height: 160rpx;
                    background: url("") no-repeat;
                    background-size: 100% !important;
                    transform: rotate(15deg);
                }
                .is-overdue {
                    background: url("");
                }
            }
        }
    }
</style>
